<template>
  <div class="export-container">
    <div>
      <span style="font-family: KaiTi; font-size: 25px">
        请下载并填写模板文件后，重新上传到系统
      </span>
    </div>
    <div class="download-info-container">
      <span style="font-family: KaiTi; font-size: 20px">
        模板文件下载:
        <el-button type="primary" size="mediuim" style="margin-left: 10px" @click="downloadTemplate">点击下载</el-button>
      </span>
    </div>
    <div class="export-div-container">
      <div class="export-div">
        <el-upload
          ref="upload"
          :action="'/api/sys/importUsers'"
          :limit="limit"
          :auto-upload="false"
          :headers="headers"
          :on-success="handleSuccess"
          accept=".xls"
          style="width: 300px"
        >
          <el-button slot="trigger" type="primary" size="medium" style="width: 120px">选择文件</el-button>
          <el-button type="success" size="medium" style="margin-left: 30px" @click="startImport">开始导入</el-button>
        </el-upload>
      </div>
    </div>
    <div>
      <div v-show="failCount>0 || successCount>0">
        <span
          style="margin-left: 20px; font-size: 20px; font-family: Kaiti; font-weight: 700"
        >添加结果: 成功添加了 {{ successCount }} 个用户, {{ failCount }} 个用户添加失败</span>
      </div>
      <div class="reasontable-container">
        <el-table
          v-show="failCount>0"
          :data="list"
          height="300"
        >
          <el-table-column label="序号" min-width="20%" align="center">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column label="用户名" min-width="40%" align="center">
            <template slot-scope="scope">
              {{ scope.row.uid }}
            </template>
          </el-table-column>
          <el-table-column label="失败原因" min-width="60%" align="center">
            <template slot-scope="scope">
              {{ scope.row.reason }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadExportTemplate } from '@/api/user'
import { downloadExcel } from '@/utils/download'
import { getToken } from '@/utils/auth'

export default {
  name: 'Export',
  data() {
    return {
      limit: 1,
      list: null,
      successCount: 0, // 添加成功用户个数
      failCount: 0, // 添加失败的数据条数
      headers: {
        Authentication: getToken()
      }
    }
  },
  methods: {
    downloadTemplate() {
      downloadExportTemplate().then(res => {
        console.log(res)
        downloadExcel(res)
        this.$message({
          message: '获取用户信息模板成功',
          type: 'success'
        })
      }).catch(() => {
        this.$message.error('获取用户信息模板失败')
      })
    },
    startImport() {
      this.$refs.upload.submit()
    },
    handleSuccess(res) {
      console.log('返回' + res)
      this.successCount = res.data.successCount
      this.failCount = res.data.failCount
      console.log('失败数量' + this.failCount)
      console.log('成功数量' + this.successCount)
      this.list = res.data.reasonList
      const lists = res.data.reasonList
      console.log('lists===' + lists)
    }
  }
}
</script>

<style lang="scss" scoped>
.export-container {
  margin: 20px;
}
.download-info-container {
  margin-top: 20px;
}
.export-div-container {
  min-height: 100%;
  margin: 20px 0;
  padding: 20px;
}
.export-div {
  margin-left: 20px;
}
.reasontable-container {
  margin: 15px;
}
</style>
